<template>
	<view class="product-title">
		<block v-if="product.is_pop">
			<label-com label="pop" :width="102" :height="30"></label-com>
			<span class="title">{{ product.title|ellipsis(length) }}</span>

		</block>
		<block v-else-if="product.is_hot">
			<label-com label="hot" :width="102" :height="30"></label-com>
			<span class="title">{{ product.title|ellipsis(length) }}</span>
			
		</block>
		<block v-else-if="product.is_subsidy">
			<label-com label="subsidy" :width="102" :height="30"></label-com>
			<span class="title">{{ product.title|ellipsis(length) }}</span>
			
		</block>
		<block v-else-if="product.is_hongkong_direct">
			<label-com label="hongkong_direct" :width="102" :height="30"></label-com>
			<span class="title">{{ product.title|ellipsis(length) }}</span>
			
		</block>
		<block v-else-if="product.is_overseas_direct">
			<label-com label="overseas_direct" :width="102" :height="30"></label-com>
			<span class="title">{{ product.title|ellipsis(length) }}</span>
			
		</block>
		<block v-else-if="product.is_sf">
			<label-com label="sf" :width="102" :height="30"></label-com>
			<span class="title">{{ product.title|ellipsis(length) }}</span>
			
		</block>
		<block v-else>
			<span class="title">{{ product.title|ellipsis(length) }}</span>
		</block>
	</view>
</template>

<script>
	export default {
		name: "ProductTitleCom",
		props: {
			product: {
				type: Object,
				required: true
			},
			length: {
				type: Number,
				default: 20
			}
		}
	}
</script>

<style lang="scss" scoped>
	.product-title {
		height: 48rpx;
		vertical-align: middle;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		.title {
			margin-bottom: 5rpx;
		}
	}
</style>
